<template>
  <div class="homepage-view">
    <header class="header">
    <nav class="navbar">
      <ul class="nav-list">
        <li class="nav-item" @click="navigateTo('/food')">嘉兴特色美食
          <ul class="dropdown-content">
            <li @click="navigateTo('/food/zongzi')">粽子</li>
            <li @click="navigateTo('/food/nanhuiling')">南湖菱</li>
            <li @click="navigateTo('/food/wentiejiangya')">文虎酱鸭</li>
            <li @click="navigateTo('/food/xianroushaomai')">鲜肉烧麦</li>
          </ul>
        </li>
        <li class="nav-item" @click="navigateTo('/travel')">嘉兴特色旅游
          <ul class="dropdown-content">
            <li @click="navigateTo('/travel/nanhu')">南湖</li>
            <li @click="navigateTo('/travel/xiangtang')">西塘</li>
            <li @click="navigateTo('/travel/yancang')">盐仓</li>
            <li @click="navigateTo('/travel/tianzhudang')">天主堂</li>
          </ul>
        </li>
        <li class="nav-item" @click="navigateTo('/famous')">嘉兴特色文化
          <ul class="dropdown-content">
            <li @click="navigateTo('/famous/jinyong')">金庸</li>
            <li @click="navigateTo('/famous/xuzhiomo')">徐志摩</li>
            <li @click="navigateTo('/famous/wangguowei')">王国维</li>
            <li @click="navigateTo('/famous/fengzikai')">丰子恺</li>
          </ul>
        </li>
        <li class="nav-item" @click="navigateTo('/author')">作者简介</li>
      </ul>
    </nav>
  </header>
    <main class="content">
      <div class="horizontal-timeline-container">
        <div class="horizontal-timeline">
          <div class="horizontal-line"></div>
          <div class="timeline-item" @click="navigateTo('/food')">
            <div class="timeline-icon icon-food"></div>
            <div class="timeline-content top">
              <h3>嘉兴特色名小吃</h3>
              <p>嘉兴是著名的粽子之乡，嘉兴粽子以其独特的糯米香气和丰富的馅料闻名，尤其是肉粽最为出名。</p>
            </div>
          </div>
          <div class="timeline-item" @click="navigateTo('/travel')">
            <div class="timeline-icon icon-tourism"></div>
            <div class="timeline-content bottom">
              <h3>嘉兴特色旅游</h3>
              <p>嘉兴的西塘是中国著名的水乡古镇，以其保存完好的古桥、石巷和江南风光吸引了众多游客，是一处体验古代江南生活的好去处。</p>
            </div>
          </div>
          <div class="timeline-item" @click="navigateTo('/famous')">
            <div class="timeline-icon icon-famous"></div>
            <div class="timeline-content top">
              <h3>嘉兴特色文化</h3>
              <p>嘉兴是金庸、徐志摩等名人的故乡，历史悠久，文化底蕴深厚。</p>
            </div>
          </div>
          <div class="timeline-item" @click="navigateTo('/author')">
            <div class="timeline-icon icon-author"></div>
            <div class="timeline-content bottom">
              <h3>作者简介</h3>
              <p>陶诗莹，中国计量大学学生，热衷于前端开发，专注于为用户创造美好的用户体验。</p>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <p>版权所有 © 姓名: 陶诗莹, 学号: 2300303105, 电话: 15024340028, 邮箱: 2351922591@qq.com</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'HomePageView',
  methods: {
    navigateTo(path) {
      this.$router.push(path);
    }
  }
};
</script>

<style scoped>
.homepage-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  font-family: 'Arial', sans-serif;
  background-color: #f9f9f9; /* 背景色 */
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1em;
  background-color: #ffffff; /* 顶部栏背景 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.logo {
  width: 50px;
  height: auto;
  margin-right: 0.5em;
}

.school-name {
  margin: 0;
  white-space: nowrap;
  color: #333; /* 字体颜色 */
}

.content {
  flex: 1;
  padding: 6em 2em 2em;
  overflow-y: auto;
}

.horizontal-timeline-container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  padding: 2em;
}

.horizontal-timeline {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: space-around;
}

.horizontal-line {
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 4px; /* 线的厚度 */
  background: #cccccc; /* 线的颜色 */
  z-index: 1;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  cursor: pointer; /* 鼠标悬停效果 */
}

.timeline-icon {
  width: 70px; /* 图标尺寸 */
  height: 70px;
  border-radius: 50%;
  background-color: #00bcd4;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.timeline-icon:hover {
  transform: translateY(-50%) scale(1.2);
  background-color: #0097a7; /* 悬停效果 */
}

.icon-food {
  background-color: #00bcd4;
}

.icon-tourism {
  background-color: #ffeb3b;
}

.icon-famous {
  background-color: #2196f3;
}

.icon-author {
  background-color: #b3e5fc;
}

.timeline-content {
  background-color: #ffffff;
  padding: 1.5em 2.5em; /* 增加内边距 */
  border-radius: 1em;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 220px; /* 调整宽度 */
  margin-top: 12em; /* 调整间距 */
  position: relative;
  transition: transform 0.3s ease;
}

.timeline-content:hover {
  transform: translateY(-5px); /* 悬停效果 */
}

.timeline-content.top {
  margin-bottom: 22em; /* 调整间距 */
  margin-top: 0;
}

.timeline-content.bottom {
  margin-top: 22em; /* 调整间距 */
}

.footer {
  padding: 1em;
  background-color: #ffffff; /* 页脚背景 */
  text-align: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  color: #666; /* 页脚字体颜色 */
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: #ffffff; /* 顶部栏背景 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.nav-list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.nav-item {
  padding: 1em;
  color: #333; /* 字体颜色 */
  cursor: pointer;
  position: relative;
}

.nav-item:hover {
  background-color: #f2f2f2;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  top: 100%;
  left: 0;
}

.nav-item:hover .dropdown-content {
  display: block;
}

.dropdown-content li {
  padding: 12px 16px;
  cursor: pointer;
}

.dropdown-content li:hover {
  background-color: #f2f2f2;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  background-color: #ffffff; /* 顶部栏背景 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); /* 仅保留这个阴影作为边框 */
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: transparent; /* 透明背景，不显示背景颜色 */
  border: none; /* 去掉边框 */
  box-shadow: none; /* 去掉阴影 */
}

.nav-list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.nav-item:hover {
  background-color: #f2f2f2; /* 悬停时的背景颜色变化 */
}

</style>
